<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-tag>当前{{ oldData.versionName }}</el-tag
        ><span style="margin-left: 10px">{{ oldData.userName }}</span
        ><span style="margin-left: 10px">{{ oldData.createTime | datetimeFormat }}</span>
      </el-col>
      <el-col :span="12">
        <el-tag>{{ newData.versionName }}</el-tag
        ><span style="margin-left: 10px">{{ newData.userName }}</span
        ><span style="margin-left: 10px">{{ newData.createTime | datetimeFormat }}</span>
      </el-col>
    </el-row>
    <div class="compare-class" v-loading="isReloadData">
      <el-card style="width: 50%" ref="old">
        <el-form :model="oldData" :rules="rule" ref="httpForm" label-width="80px" label-position="right">
          <!-- 操作按钮 -->
          <ms-form-divider :title="$t('test_track.plan_view.base_info')" />

          <!-- 基础信息 -->
          <div class="base-info">
            <el-row>
              <el-col :span="8">
                <el-form-item :label="$t('commons.name')" prop="name">
                  <el-input class="ms-http-input" size="small" v-model="oldData.name" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item :label="$t('api_report.request')" prop="path">
                  <el-input
                    :placeholder="$t('api_test.definition.request.path_info')"
                    v-model="oldData.path"
                    :disabled="true"
                    class="ms-http-input"
                    size="small"
                    style="margin-top: 5px">
                    <el-select
                      v-model="oldData.method"
                      slot="prepend"
                      style="width: 100px"
                      size="small"
                      :disabled="true">
                      <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id" />
                    </el-select>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
                  <el-select
                    v-model="oldData.userId"
                    :placeholder="$t('api_test.definition.request.responsible')"
                    filterable
                    size="small"
                    :disabled="true"
                    class="ms-http-select">
                    <el-option
                      v-for="item in maintainerOptions"
                      :key="item.id"
                      :label="item.name + ' (' + item.id + ')'"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('test_track.module.module')" prop="moduleId">
                  <ms-select-tree
                    size="small"
                    :data="moduleOptions"
                    :defaultKey="oldData.moduleId"
                    :obj="moduleObj"
                    clearable
                    checkStrictly />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item :label="$t('commons.status')" prop="status">
                  <el-select class="ms-http-select" size="small" v-model="oldData.status" :disabled="true">
                    <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item :label="$t('commons.tag')" prop="tag">
                  <ms-input-tag :currentScenario="oldData" ref="tag" v-model="oldData.tags" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('commons.description')" prop="description">
                  <el-input
                    class="ms-http-textarea"
                    v-model="oldData.description"
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 10 }"
                    :rows="1"
                    size="small"
                    :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- MOCK信息 -->
          <ms-form-divider :title="$t('test_track.plan_view.mock_info')" />
          <div class="base-info mock-info">
            <el-row>
              <el-col :span="20">
                Mock地址：
                <el-link target="_blank" style="color: black" type="primary">{{ this.oldMockUrl }} </el-link>
              </el-col>
            </el-row>
          </div>

          <!-- 请求参数 -->
          <div>
            <ms-form-divider :title="$t('api_test.definition.request.req_param')" />
            <ms-api-request-form
              :showScript="false"
              :request="oldRequest"
              :headers="oldRequest.headers"
              :isShowEnable="isShowEnable" />
          </div>
        </el-form>

        <!-- 响应内容-->
        <ms-form-divider :title="$t('api_test.definition.request.res_param')" />
        <ms-response-text :response="oldResponse" />

        <ms-form-divider :title="$t('test_track.case.other_info')" />
        <api-info-container>
          <el-form :model="oldData" ref="api-form" label-width="100px">
            <el-collapse-transition>
              <el-tabs v-model="activeName" style="margin: 20px">
                <el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
                  <form-rich-text-item
                    class="remark-item"
                    :disabled="true"
                    :data="oldData"
                    prop="remark"
                    label-width="0" />
                </el-tab-pane>
                <el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
                  <template v-slot:label>
                    <tab-pane-count :title="$t('commons.relationship.name')" :count="oldRelationshipCount" />
                  </template>
                  <dependencies-list
                    @setCount="setOldCount"
                    :read-only="true"
                    :resource-id="oldData.id"
                    resource-type="API"
                    ref="oldDependencies" />
                </el-tab-pane>
              </el-tabs>
            </el-collapse-transition>
          </el-form>
        </api-info-container>
      </el-card>
      <el-card style="width: 50%" ref="new">
        <el-form :model="newData" :rules="rule" ref="httpForm" label-width="80px" label-position="right">
          <ms-form-divider :title="$t('test_track.plan_view.base_info')" />

          <!-- 基础信息 -->
          <div class="base-info">
            <el-row>
              <el-col :span="8">
                <el-form-item :label="$t('commons.name')" prop="name">
                  <el-input class="ms-http-input" size="small" v-model="newData.name" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item :label="$t('api_report.request')" prop="path">
                  <el-input
                    :placeholder="$t('api_test.definition.request.path_info')"
                    v-model="newData.path"
                    :disabled="true"
                    class="ms-http-input"
                    size="small"
                    style="margin-top: 5px">
                    <el-select
                      v-model="newData.method"
                      slot="prepend"
                      style="width: 100px"
                      size="small"
                      :disabled="true">
                      <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id" />
                    </el-select>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
                  <el-select
                    v-model="newData.userId"
                    :placeholder="$t('api_test.definition.request.responsible')"
                    filterable
                    size="small"
                    :disabled="true"
                    class="ms-http-select">
                    <el-option
                      v-for="item in maintainerOptions"
                      :key="item.id"
                      :label="item.name + ' (' + item.id + ')'"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('test_track.module.module')" prop="moduleId">
                  <ms-select-tree
                    size="small"
                    :data="moduleOptions"
                    :defaultKey="newData.moduleId"
                    :obj="moduleObj"
                    clearable
                    checkStrictly />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item :label="$t('commons.status')" prop="status">
                  <el-select class="ms-http-select" size="small" v-model="newData.status" :disabled="true">
                    <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item :label="$t('commons.tag')" prop="tag">
                  <ms-input-tag :currentScenario="newData" ref="tag" v-model="newData.tags" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('commons.description')" prop="description">
                  <el-input
                    class="ms-http-textarea"
                    v-model="newData.description"
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 10 }"
                    :rows="1"
                    size="small"
                    :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- MOCK信息 -->
          <ms-form-divider :title="$t('test_track.plan_view.mock_info')" />
          <div class="base-info mock-info">
            <el-row>
              <el-col :span="20">
                Mock地址：
                <el-link target="_blank" style="color: black" type="primary">{{ this.newMockUrl }} </el-link>
              </el-col>
            </el-row>
          </div>

          <!-- 请求参数 -->
          <div>
            <ms-form-divider :title="$t('api_test.definition.request.req_param')" />
            <ms-api-request-form
              :showScript="false"
              :request="request"
              :headers="request.headers"
              :isShowEnable="isShowEnable" />
          </div>
        </el-form>

        <!-- 响应内容-->
        <ms-form-divider :title="$t('api_test.definition.request.res_param')" />
        <ms-response-text :response="response" />

        <!-- 其他信息-->
        <ms-form-divider :title="$t('test_track.case.other_info')" />
        <api-info-container>
          <el-form :model="newData" ref="api-form" label-width="100px">
            <el-collapse-transition>
              <el-tabs v-model="activeName" style="margin: 20px">
                <el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
                  <form-rich-text-item
                    class="remark-item"
                    :disabled="true"
                    :data="newData"
                    prop="remark"
                    label-width="0" />
                </el-tab-pane>
                <el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
                  <template v-slot:label>
                    <tab-pane-count :title="$t('commons.relationship.name')" :count="relationshipCount" />
                  </template>
                  <dependencies-list
                    @setCount="setCount"
                    :read-only="true"
                    :resource-id="newData.id"
                    resource-type="API"
                    ref="newDependencies" />
                </el-tab-pane>
              </el-tabs>
            </el-collapse-transition>
          </el-form>
        </api-info-container>
      </el-card>
    </div>
  </div>
</template>
<script>
import { API_STATUS, REQ_METHOD } from '../../../model/JsonData';
import MsFormDivider from 'metersphere-frontend/src/components/MsFormDivider';
import MsResponseText from '../../response/ResponseText';
import MsApiRequestForm from '../../request/http/ApiHttpRequestForm';
import MsSelectTree from 'metersphere-frontend/src/components/select-tree/SelectTree';
import MsInputTag from 'metersphere-frontend/src/components/MsInputTag';
import ApiInfoContainer from '@/business/definition/components/complete/ApiInfoContainer';
import DependenciesList from '@/business/commons/DependenciesList';
import FormRichTextItem from '@/business/commons/FormRichTextItem';
import { hasPermissions } from 'metersphere-frontend/src/utils/permission';
import TabPaneCount from '@/business/commons/TabPaneCount';
import { getRelationshipCountApi } from '@/api/definition';

const { diff } = require('@/business/automation/version/v_node_diff');

export default {
  name: 'HttpApiVersionDiff',
  components: {
    MsFormDivider,
    MsResponseText,
    MsApiRequestForm,
    MsInputTag,
    MsSelectTree,
    TabPaneCount,
    FormRichTextItem,
    DependenciesList,
    ApiInfoContainer,
  },
  props: {
    oldData: {
      type: Object,
    },
    newData: {
      type: Object,
    },
    showFollow: {
      type: Boolean,
    },
    newShowFollow: {
      type: Boolean,
    },
    rule: {
      type: Object,
    },
    maintainerOptions: {
      type: Array,
    },
    moduleOptions: {},
    oldMockUrl: {},
    newMockUrl: {},
    request: {},
    oldRequest: {},
    response: {},
    oldResponse: {},
  },
  computed: {
    hasPermissions() {
      return hasPermissions('PROJECT_API_DEFINITION:READ+EDIT_API');
    },
  },
  watch: {
    activeName() {
      if (this.activeName === 'dependencies') {
        this.$refs.oldDependencies.open();
        this.$refs.newDependencies.open();
      }
    },
    relationshipCount() {
      if (this.relationshipCount > 0 || this.oldRelationshipCount > 0) {
        this.getChildDiff();
      }
    },
    oldRelationshipCount() {
      if (this.relationshipCount > 0 || this.oldRelationshipCount > 0) {
        this.getChildDiff();
      }
    },
  },
  data() {
    return {
      reqOptions: REQ_METHOD,
      options: API_STATUS,
      moduleObj: {
        id: 'id',
        label: 'name',
      },
      isShowEnable: true,
      activeName: 'remark',
      relationshipCount: 0,
      oldRelationshipCount: 0,
      isReloadData: true,
      oldColor: '',
      newColor: '',
    };
  },
  methods: {
    getDiff() {
      let oldVnode = this.$refs.old;
      let vnode = this.$refs.new;
      if (this.oldData.createTime > this.newData.createTime) {
        this.oldColor = 'rgb(121, 225, 153,0.3)';
        this.newColor = 'rgb(241,200,196,0.45)';
      } else {
        this.oldColor = 'rgb(241,200,196,0.45)';
        this.newColor = 'rgb(121, 225, 153,0.3)';
      }
      diff(oldVnode, vnode, this.oldColor, this.newColor);
      this.isReloadData = false;
    },
    setCount(count) {
      this.relationshipCount = count;
      this.$nextTick(function () {
        setTimeout(this.getChildDiff, 1000);
      });
    },
    setOldCount(count) {
      this.oldRelationshipCount = count;
    },
    getChildDiff() {
      let oldVnode = this.$refs.oldDependencies;
      let vnode = this.$refs.newDependencies;
      if (
        oldVnode._data.postCount > 0 ||
        oldVnode._data.preCount > 0 ||
        vnode._data.postCount > 0 ||
        vnode._data.preCount > 0
      ) {
        diff(oldVnode, vnode, this.oldColor, this.newColor);
      }
    },
  },
  mounted() {
    getRelationshipCountApi(this.newData.id, (data) => {
      this.relationshipCount = data;
    });
    getRelationshipCountApi(this.oldData.id, (data) => {
      this.oldRelationshipCount = data;
    });
    this.$nextTick(function () {
      setTimeout(this.getDiff, ((this.$refs.old.$children.length + 1) / 2) * 1000);
    });
  },
  created() {},
};
</script>
<style scoped>
.compare-class {
  display: flex;
  justify-content: space-between;
}
</style>
